<template>
  <BasicTable
    @register="registerTable"
  >
    <template #form-custom> </template>
<!--    <template v-if="checkedKeys.length > 0" #headerTop>
      <a-alert type="info" show-icon>
        <template #message>
          <template >
            <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
            <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
          </template>

        </template>
      </a-alert>
    </template>-->
    <template #toolbar>
      <a-button type="primary" @click="handleCreate"> 新增 </a-button>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
            {
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
      />
    </template>
  </BasicTable>
  <!--注册drawer  -->
  <WebsiteArticleDrawer @register="registerDrawer" @success="handleSuccess" />
</template>
<script lang="ts">
  import { defineComponent, ref ,onMounted } from 'vue';
  import {BasicTable, useTable,TableAction} from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from './websiteArticleTableData';
  import { Alert } from 'ant-design-vue';
  //编辑表单
  import WebsiteArticleDrawer from './websiteArticleDrawer.vue';
  //左侧拉板
  import { useDrawer } from '/@/components/Drawer';
  import { websiteArticleListApi ,getWebsiteArticleVoByIdApi,logicalRemoveById } from '/@/api/website/websiteArticleApi';
  import { message } from 'ant-design-vue';

  export default defineComponent({
    components: { BasicTable, AAlert: Alert,WebsiteArticleDrawer,TableAction },
    setup() {
      const [registerDrawer, { openDrawer }] = useDrawer();
      const checkedKeys = ref<Array<string | number>>([]);

      const [registerTable, { reload,getForm ,setTableData ,setPagination,setLoading }] = useTable({
        title: '专业管理',
        columns: getBasicColumns(),
        useSearchForm: true,
        formConfig: getFormConfig(),
        showTableSetting: true,
        rowKey: 'articleId',
        bordered: true,
        showIndexColumn: true,
        actionColumn: {
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        api: websiteArticleListApi,
        fetchSetting: {
          pageField: 'current',
          // 每页显示多少条
          sizeField: 'pageSize',
          // 请求结果列表字段  支持 a.b.c
          listField: 'records',
          totalField: 'total',

        },
      });

      function handleCreate() {
        openDrawer(true, {
          isUpdate: false,
        });
      }

      async function handleEdit(record: Recordable) {
        const data = await getWebsiteArticleVoByIdApi(record.articleId);
        openDrawer(true, {
          data,
          isUpdate: true,
        });
      }

      async function handleDelete(record: Recordable) {
        await logicalRemoveById(record.articleId);
        reload();
        message.success('删除成功');
      }

      function handleSuccess() {
        reload();
      }

      onMounted(() => {
      });

      return {
        registerTable,
        checkedKeys,
        handleCreate,
        handleEdit,
        handleDelete,
        handleSuccess,
        registerDrawer
      };
    },
  });
</script>
